<template>
  <div>
    <div class="tableHead">
      <div class="tableHead-left">
        <i class="el-icon-refresh" style="cursor:pointer" @click="refreshPage"></i>
        <el-button
          type="text"
          style="margin-left:20px"
          @click="getMaxId"
        >添加设备
        </el-button
        >
        <el-button type="text" style="margin-left:20px" @click="showDeviceType"
        >批量操作
        </el-button
        >
        <el-button type="text" style="margin-left:20px" @click="batchExport"
        >批量导入
        </el-button
        >
      </div>
      <div class="tableHead-right">
        <el-button
          size="mini"
          style="height: 30px;margin:auto 50px "
          @click="searchClick"
        >搜索
        </el-button
        >
        <template>
          <el-select
            v-model="selectfloorSearch"
            placeholder="楼层"
            size="mini"
            style="width:120px;"
            :disabled="addBuilding==''"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="addBuilding"
            placeholder="楼栋"
            size="mini"
            style="width:150px;"
            :disabled="addSchoolAera==''"
            @focus="selectBuilding"
          >
            <el-option
              v-for="item in addBuildingOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              append-to-body
            ></el-option>
          </el-select>
          <el-select
            v-model="addSchoolAera"
            placeholder="校区"
            size="mini"
            style="width:150px;"
            :disabled="addBlock!=''"
            @focus="selectSchool"
          >
            <el-option
              v-for="item in addSchoolAeraOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              append-to-body
            ></el-option>
          </el-select>
          <el-select
            v-model="addBlock"
            placeholder="区域块"
            size="mini"
            style="width:150px;"
            :disabled="addSchoolAera!=''"
            @focus="selectBlock"
          >
            <el-option
              v-for="(val,key) in addBlockList"
              :key="key"
              :label="val.name"
              :value="val.id"
              append-to-body
            ></el-option>
          </el-select>
          <el-select
            v-model="addDeviceType"
            placeholder="设备类型"
            size="mini"
            style="width:150px;"
            @focus="selectDeviceType"
          >
            <el-option
              v-for="item in addDeviceTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              append-to-body
            ></el-option>
          </el-select>
        </template>
      </div>
    </div>

    <template>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          type="expand"
          label="查看详情"
          width="78px"
          align="center"
          style="padding:0;height: 50px;"
        >
          <template slot-scope="props" style="padding:0">
            <el-form
              label-position="left"
              inline
              class="demo-table-expand"
              style="padding:0;height: 40px;"
            >
              <el-form-item label="IP:">
                <span>{{ props.row.ip }}</span>
              </el-form-item>
              <el-form-item label="端口号:">
                <span>{{ props.row.location }}</span>
              </el-form-item>
              <el-form-item label="编号:">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="设备地址:">
                <span>{{ props.row.numCode }}</span>
              </el-form-item>
              <el-form-item label="设备名称:">
                <span>{{ props.row.name }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="型号" prop="type" align="center">
        </el-table-column>
        <el-table-column label="品牌" prop="brandge" align="center">
        </el-table-column>
        <el-table-column label="环境温度" align="center">
          <template slot-scope="scope"> {{ scope.row.ter }}</template>
        </el-table-column>
        <el-table-column label="当前状态" prop="status" align="center">
        </el-table-column>
        <el-table-column label="灯光状态" prop="dg_status" align="center">
        </el-table-column>
        <el-table-column label="风扇状态" prop="fs_status" align="center">
        </el-table-column>
        <el-table-column label="已用电量" prop="nums" align="center">
        </el-table-column>
        <el-table-column label="控制" prop="control" width="200" align="center">
          <template slot-scope="props">
            <el-select
              v-if="props.row.instruct.length != 0"
              v-model="controlItem[props.$index]['control' + props.$index]"
              placeholder="请选择"
              size="small"
              :disabled="controllIsDone"
              style="width:150px;"
              @change="
                controllSelectClick(
                  props.row.id,
                  controlItem[props.$index]['control' + props.$index]
                )
              "
            >
              <el-option
                v-for="(val,key) in props.row.instruct"
                :key="key"
                :label="val.name"
                :value="val.id"
              >
              </el-option>
            </el-select>
            <span v-else>暂无</span>
          </template>
        </el-table-column>
        <el-table-column label="自控状态" prop="selfControl" align="center">
          <template slot-scope="props">
            <el-switch
              v-if="props.row.selfControl !== 'null'"
              v-model="props.row.selfControl"
              active-color="#13ce66"
              inactive-color="#ff3342"
              @change="switchChange($event, props.row.id)"
            >
            </el-switch>
            <span v-else>暂无</span>
          </template>
        </el-table-column>

        <el-table-column
                label="继电器控制"
                prop="selfControl"
                align="center"
                width="200"
        >
          <template slot-scope="props">
            <template v-if="props.row.jdControl !== 'null'">
              <el-popover
                      v-if="props.row.selfControl"
                      placement="top-start"
                      title="提示"
                      width="100"
                      trigger="hover"
                      content="您需要关闭自控状态后操作"
              >
                <el-switch
                        slot="reference"
                        :disabled="props.row.selfControl"
                        v-model="props.row.jdControl"
                        active-color="#13ce66"
                        inactive-color="#ff3342"
                        @change="
                    switchChange2($event, props.row.id, props.row.selfControl)
                  "
                >
                </el-switch>
              </el-popover>
              <el-switch
                      v-if="!props.row.selfControl"
                      slot="reference"
                      v-model="props.row.jdControl"
                      active-color="#13ce66"
                      inactive-color="#ff3342"
                      @change="
                  switchChange2($event, props.row.id, props.row.selfControl)
                "
              >
              </el-switch>
            </template>
            <span v-else>暂无</span>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          prop="manage"
          align="center"
          width="200px"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="
                handleEdit(
                  scope.row.id,
                  scope.row.ip,
                  scope.row.location,
                  scope.row.name,
                  scope.row.numCode
                )
              "
            >修改
            </el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.name, scope.row.id)"
            >删除
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div style="text-align:center;margin:20px 0 0 0 ">
        <!-- <el-switch v-model="pages"> </el-switch> -->
        <el-pagination
          :hide-on-single-page="pages"
          :total="total"
          :page-size="10"
          layout="prev, pager, next"
          @current-change="changePage"
          @prev-click="prevClick"
          @next-click="nextClick"
        >
        </el-pagination>
      </div>
    </template>
    <!-- 添加弹窗 -->

    <el-dialog
      :title="status == 'success' ? '成功':(status == '' ? '加载中':'失败')"
      :visible.sync="showProgress"
      :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false"
      width="170px"
      style="border-bottom: 1px #eee solid; background-color:rgba(255,255,255,0.8);"
      >
      <el-progress  :text-inside="true"  type="circle" :percentage="percentage" :status = status></el-progress>
    </el-dialog>



<el-dialog :visible.sync="dialogTableVisibleloading" :show-close="showClo" :close-on-click-modal="clo">
<div class="dia" v-loading="loading"
 :data="tableData"
    element-loading-text="正在读取设备信息，请耐心等待"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"  />
</el-dialog>

    <el-dialog
      title="添加设备"
      :visible.sync="centerDialogVisible"
      width="650px"
      style="border-bottom: 1px #eee solid;"
    >
      <ul class="dialogContent">
        <li class="dialogContentItem">
          <span class="dItemText">校区:</span>
          <template>
            <el-select
              v-model="addSchoolAera"
              placeholder="请选择校区"
              size="small"
              :loading="addSchoolAeraOptions.length == 0"
              @focus="selectSchool"
            >
              <el-option
                v-for="item in addSchoolAeraOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </li>
        <li class="dialogContentItem">
          <span class="dItemText">楼栋:</span>
          <template>
            <el-select
              v-model="addBuilding"
              :disabled="addSchoolAera == ''"
              placeholder="请选择楼栋"
              size="small"
              :loading="addBuildingOptions.length == 0"
              @focus="selectBuilding"
            >
              <el-option
                v-for="item in addBuildingOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </li>
        <li class="dialogContentItem">
          <span class="dItemText">楼层:</span>
          <template>
            <el-select
              v-model="addFloor"
              :disabled="addBuilding == ''"
              placeholder="请选择楼层"
              size="small"
              :loading="addFloorOptions.length == 0"
              @focus="selectFloor"
            >
              <el-option
                v-for="item in addFloorOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </li>
        <li class="dialogContentItem">
          <span class="dItemText">教室:</span>
          <template>
            <el-select
              v-model="addRoom"
              :disabled="addFloor == ''"
              placeholder="请选择"
              size="small"
              @focus="selectRoom"
            >
              <!-- :loading="addRoomOptions.length == 0" -->
              <el-option
                v-for="item in addRoomOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </li>
        <li class="dialogContentItem">
          <span class="dItemText">品牌:</span>
          <template>
            <el-select
              v-model="addBrand"
              @focus="selectBrand"
              placeholder="请选择品牌"
              size="small"
            >
              <el-option
                v-for="item in addBrandOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </li>
        <li class="dialogContentItem">
          <span class="dItemText">型号:</span>
          <template>
            <el-select
              v-model="addType"
              :disabled="addBrand == ''"
              placeholder="请选择型号"
              size="small"
              @focus="selectType"
            >
              <el-option
                v-for="item in addTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                append-to-body
              >
              </el-option>
            </el-select>
          </template>
        </li>
        <li class="dialogContentItem">
          <span class="dItemText numStyle">设备类型:</span>
          <template>
            <el-select
              v-model="addDeviceType"
              placeholder="请选择类型"
              size="small"
              @focus="selectDeviceType"
            >
              <el-option
                v-for="item in addDeviceTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                append-to-body
              >
              </el-option>
            </el-select>
          </template>
        </li>
<!--        <li class="dialogContentItem">-->
<!--          <span class="dItemText numStyle">设备编号:</span>-->
<!--          <el-input-->
<!--            v-model="addId"-->
<!--            placeholder="默认"-->
<!--            size="small"-->
<!--            style="width:215px"-->
<!--            disabled=""-->
<!--          ></el-input>-->
<!--        </li>-->
        <li class="dialogContentItem">
          <span class="dItemText numStyle">设备地址:</span>
          <el-input
            v-model="addAddress"
            placeholder="默认"
            size="small"
            style="width:215px"
          ></el-input>
        </li>
        <li class="dialogContentItem">
          <span class="dItemText ipStyle">控制器IP:</span>
          <el-input
            v-model="addIp"
            placeholder="ip地址:xxx.xx.xx.xx"
            size="small"
            style="width:215px"
          ></el-input>
        </li>
        <li class="dialogContentItem">
          <span class="dItemText ipStyle">端口号:</span>
          <el-input
            v-model="addPort"
            placeholder="例:8081"
            size="small"
            style="width:215px"
          ></el-input>
        </li>
        <li class="dialogContentItem ">
          <span class="dItemText nameStyle">设备名称:</span>
          <el-input
            v-model="addName"
            placeholder="例:东二209-1"
            size="small"
            style="width:215px"
          ></el-input>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer" center>
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click.prevent="addDevice"
          :disabled="
            !(addRoom && addType && addId && addName && addPort && addIp)
          "
        >确 定</el-button
        >
      </span>
    </el-dialog>
    <editDevice
      :showDialog="showDialog"
      :editid="editid"
      :editname="editname"
      :editip="editip"
      :editport="editport"
      :editAddress="numCode"
      @editClose="editClose"
    ></editDevice
    ><!-- 修改设备 -->
    <batchDialog
      :showBatch="showBatch"
      @batchOperatClose="batchOperatClose"
    ></batchDialog
    ><!-- 批量管理 -->
    <select-type
      :show-type-list="showTypeList"
      @TypeListClose="TypeListClose"
    ></select-type
    >
    <!-- 批量导入 -->
    <batch-up-load
      :batchUpLoad="batchUpLoad"
      @closeModel="closeModel"
    ></batch-up-load>
  </div>
</template>

<script>
  import editDevice from './editDevice'
  import batchDialog from './batchOperat'
  import selectType from "./selectType"
  import batchUpLoad from "../setting/type/batchUpLoad";
  import axios from 'axios'
  import qs from 'qs'

  export default {
    data () {
      return {
        /* 此处为添加功能弹窗值绑定值*/
        timerId: '', //定时器id
        controllIsDone: false, //下拉框执行是否完成，完成前所有下拉框禁用
        pages: true,
        pagesNum: 1,
        total: 0,
        schoolLoaded: true, //添加弹窗加载动画
        test: '',
        isSearch: false,
        selectfloorSearch: '', //筛选楼层条件
        addName: '东二209', //空调名称
        addIp: '172.16.22.209', //空调ip
        addId: '', //空调编号
        addType: '', //空调型号
        addDeviceType: '',//设备类型
        addBrand: '', //空调品牌
        addRoom: '', //教室名称
        addFloor: '', //楼层
        addBuilding: '', //楼栋
        addSchoolAera: '', //校区
        addPort: '8001', //端口号
        addAddress: '',


        //lodaing服务
        dialogTableVisibleloading:false,
        showClo:false,
       loading:true,
       clo:false,

        addNameOptions: [], //空调名称
        addIpOptions: [], //空调ip
        addIdOptions: [], //空调编号
        addTypeOptions: [], //空调型号
        addDeviceTypeOptions: [],//设备类型
        addBrandOptions: [], //空调品牌
        addRoomOptions: [], //教室名称
        addFloorOptions: [], //楼层
        addBuildingOptions: [], //楼栋
        addSchoolAeraOptions: [], //校区

        /* 修改设备信息值 */
        showDialog: false,
        type: '',
        room: '',
        floor: '',
        build: '',
        school: '',
        brand: '',
        id: '',
        ip: '',
        name: '',
        editid: '',
        editname: '',
        editip: '',
        editport: '',
        numCode: '',

        /*选择设备*/
        showTypeList: false,//批量操作设备选择弹窗
        deviceTypes: '',

        showBatch1: false,

        /* 批量导入 */
        showUpLoad: false,

        /*  */
        timer: null,
        showProgress: false, //进度条
        percentage:0,//进度条百分比
        status: "",
        showBatch: false, //批量操作弹窗
        showTestPage: false,
        centerDialogVisible: false, //添加设备弹窗控制
        selectBuild: '', //选择楼栋绑定值，头部搜索
        searchInput: '', //头部搜索输入框
        code: this.$route.query.code, //路由标识符
        buildId: this.$route.query.build
          ? this.$route.query.build
          : localStorage.getItem('initBuildId'), //楼栋id
        floorNum: this.$route.query.fNum
          ? this.$route.query.fNum
          : localStorage.getItem('initFloorNum'), //楼层数
        schoolId: this.$route.query.sch
          ? this.$route.query.sch
          : localStorage.getItem('initschoolId'), //校区ID
        controlItem: [], //控制项下拉框绑定值
        instructId:null,
        selfBtnValue: '',
        options: [
          //楼层搜索下拉框
        ],
        control: [],
        controlItemLength: '', //下拉框绑定值
        tableData: [
          //列表数据
          // {
          //   type: "1P",
          //   brandge: "格力",
          //   ter: "26",
          //   status: "通电未开机",
          //   nums: "200度",
          //   control: [
          //     {
          //       value: "开机",
          //       label: "开机"
          //     },
          //     {
          //       value: "关机",
          //       label: "关机"
          //     },
          //     {
          //       value: "高风制冷20度",
          //       label: "高风制冷20度"
          //     },
          //     {
          //       value: "高风制冷18度",
          //       label: "高风制冷18度"
          //     },
          //     {
          //       value: "低风制冷18度",
          //       label: "低风制冷18度"
          //     }
          //   ],
          //   selfControl: false,
          //   jdControl: true,
          //   location: "东二209",
          //   name: "空调一",
          //   id: "1123",
          //   ip: "172.16.22.18"
          // },
        ],
        addBlock:'',
        addBlockList:[],
        deviceTypeId:'',
        blockId:'',
        isOnline:1,
        batchUpLoad: false
      }
    },
    components: {
      editDevice,
      batchDialog,
      selectType,
      batchUpLoad
    },
    methods: {
      closeModel(){
        this.batchUpLoad = false
      },
      getMaxId(){
        axios.get(this.api+'types/maxId',{
          headers:{'X-Requested-With':'XMLHttpRequest'},
          withCredentials:true
        }).then(res => {
          this.addId = res.data
          console.log(this.addId)
        })
        this.centerDialogVisible = true
      },
      controllSelectClick (id, event) {
        this.Progress();
        console.log(id, event)
        // this.controllIsDone = true
        axios.get(this.api + 'devices/controlByInstructId', {
          params: {deviceId: id, instructId: event},
          headers: {'X-Requested-With': 'XMLHttpRequest'},
          withCredentials: true,
        }).then(data => {
            this.ProgressEnd(data.data);
        }).catch(() => {
            console.log('指令执行失败')
            this.ProgressEnd(false);
          })

        //   () => {
        //   this.controllIsDone = false
        // }).catch(() => {
        //   console.log('指令执行失败')
        //   temp = false;
        // })
        // setTimeout(() => {
        //   this.controllIsDone = false
        // }, 500)

      },
      inintList (List, data) {
        let temp
        let dg_status
        let fs_status
        data.forEach(item => {
          temp = false
          if(this.isOnline == 1 && item.log != null){
            temp  = true
          }else if(this.isOnline == 0 && item.log == null){
            temp  = true
          }
          if(temp){
            if(item.log!=null){
              if(item.log.zigbeeStatusFs==0){
                    fs_status='风扇全关'
              }else if(item.log.zigbeeStatusFs==-1){
                fs_status='风扇状态获取失败'
              } if(item.log.zigbeeStatusFs==1){
                fs_status='第一个风扇开'
              }else if(item.log.zigbeeStatusFs==2){
                fs_status='第二个风扇开'
              }
              else if(item.log.zigbeeStatusFs==3){
                fs_status='第一和第二个风扇开'
              }
              else if(item.log.zigbeeStatusFs==4){
                fs_status='第三个风扇开'
              }
              else if(item.log.zigbeeStatusFs==5){
                fs_status='第一与第三个风扇开'
              }
               else if(item.log.zigbeeStatusFs==6){
                fs_status='第二与第三个风扇开'
              }
              else if(item.log.zigbeeStatusFs==7){
                fs_status='风扇全开'
              }
              if(item.log.zigbeeStatus==0){
                    dg_status='灯全灭'
              }else if(item.log.zigbeeStatus==-1) {
                dg_status='灯光状态获取失败'
              }if(item.log.zigbeeStatus==1){
                dg_status='第一个灯亮'
              }else if(item.log.zigbeeStatus==2){
                dg_status='第二个灯亮'
              }
              else if(item.log.zigbeeStatus==3){
                dg_status='第一和第二个灯亮'
              }
              else if(item.log.zigbeeStatus==4){
                dg_status='第三个灯亮'
              }
              else if(item.log.zigbeeStatus==5){
                dg_status='第一与第三个灯亮'
              }
               else if(item.log.zigbeeStatus==6){
                dg_status='第二与第三个灯亮'
              }
              else if(item.log.zigbeeStatus==7){
                dg_status='灯全亮'
              }
            }
            List.push({
              type: item.model_name,
              brandge: item.brand_name,
              ter: item.log ? item.log.contextT + '℃' : '暂无',
              status: item.log
                ? (item.log.relayStatus ? '通电' : '未通电') +
                (item.log.onOffStatus ? '开机' : '未开机')
                : '暂无',
                dg_status: item.log
                ?dg_status
                : '暂无',
                fs_status: item.log
                ?fs_status
                : '暂无',
              nums: item.log ? item.log.electricConsume + '度' : '暂无',
              selfControl: item.log ? item.log.autoStatus == 0 ? false : true : 'null',
              control: this.control,
              jdControl: item.log
                ? item.log.relayStatus == 0
                  ? false
                  : true
                : 'null',
              location: item.port,
              name: item.name,
              id: item.id,
              ip: item.ip_address,
              numCode: item.address_code,
              instruct: item.Instruct
            })
          }
        })
      },
      changePage ($event) {
        //分页页码改变
        console.log($event)
        this.pagesNum = $event

        if (this.isSearch) {
          this.getPageAfterList()
        } else {
          this.getListData()
        }
      },
      prevClick ($event) {
        //上一页按钮事件
        console.log($event)
      },
      nextClick ($event) {
        //下一页按钮事件
        console.log($event)
      },
      addDevice () {

this.dialogTableVisibleloading=true;

        //添加设备
        let params = {
          name: this.addName,
          ipAddress: this.addIp,
          port: this.addPort,
          addressCode: this.addAddress,
          roomId: this.addRoom,
          modelId: this.addType,
          typeId: this.addDeviceType
        }
        $.ajax({
          type: 'POST',
          url: this.api + 'devices',
          headers: {
            'X-Requested-With': 'XMLHttpRequest'
          },
          xhrFields: {
            withCredentials: true
          },
          data: JSON.stringify(params),
          contentType: 'application/json',
          success: data => {
            // 刷新列表
            console.log(data)
            this.dialogTableVisibleloading=false;
            this.messageSuccess()
            this.centerDialogVisible = false
          },
          error: () => {
            this.messageErr()
          }
        })
      },
      selectBlock(){
        this.addBlockList = []
        this.addBlock = ''
        this.addSchoolAeraOptions = []
        this.addBuildingOptions = []
        this.addFloorOptions = []
        this.addFloor = ''
        this.addBuilding = ''
        this.addRoomOptions = []
        this.addRoom = ''

        this.pubilcFnAxios('block/getBlockByUserId', {userId:sessionStorage.getItem('userId')})
          .then(data => {
            this.addBlockList = data
          })
      },
      selectSchool () {
        //校区下拉框数据加载
        this.addSchoolAeraOptions = []
        this.addBuildingOptions = []
        this.addFloorOptions = []
        this.addSchoolAera = ''
        this.addFloor = ''
        this.addBuilding = ''
        this.addRoomOptions = []
        this.addRoom = ''
        this.constructData('schoolZones', this.addSchoolAeraOptions)
      },
      selectBuilding () {
        //楼栋下拉框数据加载
        this.addFloorOptions = [];
        (this.addFloor = ''), //楼层
          (this.addBuildingOptions = [])
        this.addRoomOptions = []
        this.addRoom = ''
        this.constructData('buildings', this.addBuildingOptions, {
          zoneId: this.addSchoolAera
        })
      },
      selectFloor (params) {
        //楼层下拉数据加载
        this.addFloorOptions = []
        this.addRoomOptions = []
        this.addRoom = ''
        this.pubilcFnAxios(`buildings/${this.addBuilding}/floors`, {})
          .then(data => {
            console.log(data)
            for (let i = 1; i < data + 1; i++) {
              this.addFloorOptions.push({label: i + 'F', value: i})
            }
          })
          .catch(() => {
            console.log('请求失败')
          })
      },
      selectRoom () {
        //加载教室下拉框数据
        this.addRoomOptions = []
        this.constructData(
          `rooms/${this.addBuilding}/${this.addFloor}`,
          this.addRoomOptions,
          {}
        )
      },
      selectBrand () {
        //加载品牌列表
        this.addBrandOptions = []
        this.addTypeOptions = []
        this.addType = ''
        this.pubilcFnAxios('models/brands', {})
          .then(data => {
            for (let i = 0; i < data.length; i++) {
              this.addBrandOptions.push({label: data[i], value: data[i]})
            }
          })
          .catch(() => {
            console.log('请求失败')
          })
      },
      selectType () {
        //加载型号
        this.addTypeOptions = []
        this.constructData(`/models/${this.addBrand}`, this.addTypeOptions, {})
      },
      selectDeviceType () {
        //加载设备类型
        this.addDeviceTypeOptions = []
        this.pubilcFnAxios('types', {})
          .then(data => {
            console.log(data)
            for (let i = 0; i < data.length; i++) {
              this.addDeviceTypeOptions.push({label: data[i].name, value: data[i].id})
            }
          })
          .catch(() => {
            console.log('请求失败！')
          })
      },
      constructData (urlString, obj, params) {
        //构造下拉菜单数据结构
        this.pubilcFnAxios(urlString, params)
          .then(data => {
            console.log(data)
            data.forEach(item => {
              obj.push({
                value: item.id,
                label: item.name || item.modelName
              })
            })
            this.schoolLoaded = false
          })
          .catch(() => {
            console.log('请求失败')
          })
      },

      pubilcFnAxios (urlString, params, method) {
        //公用axios数据请求
        return new Promise((resolve, reject) => {
          axios.get(this.api + urlString, {
            params: params,
            headers: {'X-Requested-With': 'XMLHttpRequest'},
              withCredentials: true,
            }).then(res => {
            resolve(res.data)
          }).catch(err => {
            reject('get请求错误')
          })
        })
    },

    buildControlModel () {
      //构造下拉框绑定值
      let arr = []
      let i = 0
      for (i; i < this.controlItemLength; i++) {
        arr.push({['control' + i]: ''})
      }
      console.log(arr)
      return arr
    },
    switchChange (el, id) {
      //自控状态开关控制
      //推拉框回调函数
      console.log(el, id)
      this.Progress();
      if (el) {
        this.pubilcFnAxios('devices/auto/on', {ids: [id].toString()})
                .then(data => {
                  console.log(data)
                  this.ProgressEnd(data);
                    // console.log('自控状态操作成功')
                  //   this.ProgressEnd(true);
                })
                .catch(() => {
                  console.log('打开自控状态请求失败')
                  this.ProgressEnd(false);
            })
        } else {
          this.pubilcFnAxios('devices/auto/off', {ids: [id].toString()})
            .then(data => {
              this.ProgressEnd(data);
              // console.log('自控状态操作成功')
              // this.ProgressEnd(true);
            })
            .catch(() => {
              console.log('关闭自控状态请求失败')
              this.ProgressEnd(false);
            })
        }
      },
      switchChange2 (el, id, selfStatus) {//继电器开关控制
        // this.tableData[id].selfControl = !this.tableData[id].selfControl;
        console.log(id)
        this.Progress();

        if (el) {
          this.pubilcFnAxios('devices/relay/on', {ids: [id].toString()}).then(data => {
            this.ProgressEnd(data);
            // console.log('继电器操作成功')
            // this.ProgressEnd(true);
          }).catch(() => {
            console.log('打开继电器请求失败')
            this.ProgressEnd(false);
          })
        } else {
          this.pubilcFnAxios('devices/relay/off', {ids: [id].toString()}).then(data => {
            this.ProgressEnd(data);
            // console.log('继电器操作成功')
            // this.ProgressEnd(true);
          }).catch(() => {
            console.log('关闭继电器请求失败')
            this.ProgressEnd(false);
          })
        }
      },
      searchClick () {
        //搜索功能
        let params = {
          typeId: this.addDeviceType,
          userId: sessionStorage.getItem('userId')
        }
        // this.pubilcFnAxios(
        //   `devices/${this.schoolId || localStorage.getItem('initschoolId')}/${this.buildId || localStorage.getItem('initBuildId')}/${this.selectfloorSearch}`,params
        // ).then(data => {
        //   this.tableData = []
        //   this.isSearch = true
        //   this.total = data.total
        //   this.controlItemLength = data.list.length //下拉框绑定值
        //   this.controlItem = this.buildControlModel()
        //   this.inintList(this.tableData, data.list)
        // }).catch(() => {
        //   console.log('筛选请求失败')
        // })
        if (this.addBlock!='') {
          this.pubilcFnAxios(
            `devices/blockId/${this.addBlock}` , params
          ).then(data => {
            console.log(this.addBlock)
            this.tableData = []
            this.isSearch = true
            this.total = data.total
            this.controlItemLength = data.list.length //下拉框绑定值
            this.controlItem = this.buildControlModel()
            this.inintList(this.tableData, data.list)
          }).catch(() => {
            console.log('筛选请求失败')
          })
        } else {
          this.pubilcFnAxios(
            `devices/${this.addSchoolAera}/${this.addBuilding}/${this.selectfloorSearch}` , params
          ).then(data => {
            this.tableData = []
            this.isSearch = true
            this.total = data.total
            this.controlItemLength = data.list.length //下拉框绑定值
            this.controlItem = this.buildControlModel()
            this.inintList(this.tableData, data.list)
          }).catch(() => {
            console.log('筛选请求失败')
          })
        }
      },
      editClose () {
        //修改设备弹窗，子组件调用函数，关闭弹窗
        console.log('子组件触发成功')
        this.showDialog = false
      },
      batchOperatClose () {
        //批量操作弹窗，子组件调用函数，关闭弹窗
        console.log('子组件触发成功')
        this.showBatch = false
      },
      handleEdit (id, ip, port, name, code) {
        //修改按钮绑定事件
        this.editid = id.toString()
        this.editname = name
        this.editip = ip
        this.editport = port.toString()
        this.numCode = code.toString()
        this.showDialog = true
        console.log(id, ip, port, name, code)
      },
      open (name, id) {
        //删除提示框
        this.$confirm(`此操作将删除${name}, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            axios.delete(this.api + `/devices/${id}`, {
              headers: {'X-Requested-With': 'XMLHttpRequest'},
              withCredentials: true,
            }).then(res => {
              console.log(res.data)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              if (this.isSearch) {
                this.getPageAfterList()
              } else {
                this.getListData()
              }
            }).catch(() => {
              this.$message({
                type: 'error',
                message: '删除失败!'
              })
            })
          }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      messageSuccess () {
        this.$message({
          showClose: true,
          message: '操作成功',
          type: 'success'
        })
      },
      messageErr () {
        this.$message({
          showClose: true,
          message: '操作失败，请检查网络',
          type: 'error'
        })
      },
      handleDelete (name, id) {
        //按钮点击事件
        this.open(name, id)
      },
      Progress () {
        // alert("test");
        this.status = "";
        this.percentage = 0;
        this.showProgress = true;
        this.timer = setInterval(()=>{
          if(this.percentage<99){
            this.percentage++;
          }
        }, 25);
      },
      ProgressEnd (ProgressStatus) {
        if(ProgressStatus == true){
           this.percentage = 100;
          this.status = "success";
        }else {
          this.status = "exception";
          // alert("操作失败");
        }
        this.timer = setTimeout(()=>{
          location.reload();
          this.showProgress = false;
          this.percentage = 0;
        }, 1000);
      },

      refreshPage () {
        //刷新页面事件
        // alert("test");
        location.reload()
      },
      batchOperat () {
        //批量管理点击事件
        this.showBatch = true
      },
      batchExport () {
        //批量导入按钮事件
        this.batchUpLoad = true
        // this.showUpLoad = true
      },
      exportClose () {
        //批量导入回调函数
        this.showUpLoad = false
      },
      openMessage () {
        this.$notify({
          title: '警告',
          message: '存在设备故障',
          type: 'warning',
          duration: 0,
          onClick: this.checkedInfo
        })
      },
      checkedInfo () {
        this.$router.push('/admin/waringInfo')
        console.log('查看消息')
      },
      constructSearchInput () {
        //构造搜索项下拉框数据
        for (let i = 0; i < this.floorNum; i++) {
          this.options.push({value: `${i + 1}`, label: `${i + 1}F`})
        }
      },
      getListData () {
        // let params = {
        //   typeId: this.addDeviceType,
        //   pageNum: this.pagesNum,
        //   pageSize: 10
        // }
        // this.pubilcFnAxios(`devices`, params)
        //   .then(data => {
        //   this.tableData = []
        //   this.total = data.total
        //   this.controlItemLength = data.list.length //下拉框绑定值
        //   this.controlItem = this.buildControlModel()
        //   this.inintList(this.tableData, data.list)
        // })
        //   .catch(() => {
        //     console.log('请求失败')
        //   })

        let userId = sessionStorage.getItem('userId')
        let params = {
          typeId: this.deviceTypeId,
          userId: userId
            }
        this.pubilcFnAxios(
          `devices/blockId/${this.blockId}` , params
        ).then(data => {
          this.tableData = []
          this.isSearch = true
          this.total = data.total
          this.controlItemLength = data.list.length //下拉框绑定值
          this.controlItem = this.buildControlModel()
          this.inintList(this.tableData, data.list)
          this.deviceTypeId = ""
          this.blockId = ""
        }).catch(() => {
          console.log('筛选请求失败')
        })

      },
      getPageAfterList () {
        let params = {
          pageNum: this.pagesNum,
          pageSize: 10
        }
        this.pubilcFnAxios(
          `devices/${this.schoolId || localStorage.getItem('initschoolId')}/${this
            .buildId || localStorage.getItem('initBuildId')}/${
            this.selectfloorSearch
          }`,
          params
        )
          .then(data => {
            this.tableData = []
            this.isSearch = true
            this.total = data.total
            this.controlItemLength = data.list.length //下拉框绑定值
            this.controlItem = this.buildControlModel()
            this.inintList(this.tableData, data.list)
          })
          .catch(() => {
            console.log('筛选请求失败')
          })
      },
      refresh () {
        this.timerId = setInterval(() => {
          console.log('定时器执行' + new Date())
          if (this.isSearch) {
            this.getPageAfterList()
          } else {
            this.getListData()
          }
        }, 20000)
      },
      clear () {
        clearInterval(this.timerId) //清除计时器
        this.timerId = null //设置为null
      },
      showDeviceType () {
        this.showTypeList = true
        console.log(this.showTypeList)
      },
      TypeListClose () {
        this.showTypeList = false
        // console.log(this.deviceTypes)
      },
      setTypeAndBlock(){
        let deviceTypeId = this.$route.query.deviceTypeId;
        let blockId = this.$route.query.blockId;
        let isOnline = this.$route.query.isOnline;
        if(deviceTypeId !== undefined && blockId !== undefined){
          this.deviceTypeId = deviceTypeId
          this.blockId = blockId
        }
        if(isOnline !== undefined){
          this.isOnline = isOnline
        }
      }
    },
    watch: {
      $route () {
        //监听路由参数变化触发事件，在这里进行页面切换时请求接口
        // this.code = this.$route.query.b;
        this.setTypeAndBlock()
        this.tableData = []
        this.buildId = this.$route.query.build
        this.floorNum = this.$route.query.fNum
        this.schoolId = this.$route.query.sch
        localStorage.setItem('initschoolId', this.$route.query.sch)
        localStorage.setItem('initBuildId', this.$route.query.build)
        localStorage.setItem('initFloorNum', this.$route.query.fNum)
        this.options = []
        this.constructSearchInput()
        this.pubilcFnAxios('items')
          .then(data => {
            this.control = []
            for (let i = 0; i < data.length; i++) {
              this.control.push({label: data[i], value: data[i]})
            }
            this.getListData()
          })
          .catch(() => {
            console.log('构造列表失败')
          })
      }
    },
    mounted () {
      //初始化下拉框绑定值
      this.setTypeAndBlock()
      this.constructSearchInput()
      console.log(this.$route.query.code)
      console.log(this.tableData)
      this.pubilcFnAxios('items')
        .then(data => {
          this.control = []
          for (let i = 0; i < data.length; i++) {
            this.control.push({label: data[i], value: data[i]})
          }
          this.getListData()
        })
        .catch(() => {
          console.log('构造列表失败')
        })
      // this.openMessage();
      // this.refresh()
    },
    destroyed () {
      console.log('页面销毁')
      clearInterval(this.timer);
      this.clear()
    }
  }
</script>

<style scoped>
  @import '../../assets/public/model.css';

  .tableHead {
    height: 50px;
    border-bottom: 1px solid #000;
    line-height: 50px;
    /* padding: 0 0 0 5px; */
  }

  .tableHead .tableHead-left {
    display: inline-block;
    width: 49%;
  }

  .el-icon-refresh {
    float: left;
    margin-left: 20px;
    font-size: 34px;
    font-weight: 900;
    color: #5daf34;
    padding-top: 7px;
    cursor: pointer;
  }

  .tableHead-left {
    float: left;
  }

  .tableHead .tableHead-right {
    display: inline-flex;
    flex-direction: row-reverse;
    width: 50%;
  }

  .tableHead .tableHead-right .el-input-sellf {
    position: relative;
    font-size: 14px;
    display: inline-block;
    /* width: 100%; */
  }

  .tableHead .tableHead-right .tableSearch {
    border-radius: 5px;
    height: 40px;
    width: 50px;
  }

  .dialogContent {
    /* background: red; */
    height: 100%;
    width: 100%;
    text-align: center;

  }

  .dialogContent .dialogContentItem {
    height: 30px;
    margin: 0 0 20px 0;
  }

  .dialogContent .dialogContentItem .dItemText {
    margin-right: 15px;
  }

  .numStyle {
    margin: 0 0 20px -27px;
  }

.dia{
    width: 100%;
    height: 300px;
}

  .ipStyle {
    margin: 0 0 20px -15px;
  }

  .nameStyle {
    margin: 0 0 20px -29px;
  }
</style>
